<template>
	<!-- 模板上读取ref中的值无需加.value -->
	<p>ref demo {{ ageRef }}</p>
	<p>state.age: {{ state.age }}</p>
</template>

<script>
	import { ref, reactive } from "vue";

	/* 基本数据类型的响应式 */
	export default {
		name: "Ref",

		// react的函数式组件 返回JSX（模板）
		// comsition-API的setup 返回的是模板要使用的响应式数据
		setup() {
			/* ref定义值类型（基本数据类型）的响应式数据 */
			const ageRef = ref(20);
			console.log(ageRef);

			/* 对象类型响应式（每个基础类型都需要一个单独的ref） */
			// data(){retur {...}}
			const state = reactive({
				name: "outlawChang",
				age: 18,
			});

			setTimeout(() => {
				// 访问基础数据类型的响应式
				console.log("ageRef.value", ageRef.value);//20

				/* 修改基础数据类型的ref.value */
				ageRef.value = 25; // .value 修改值

				state.age += 10
			}, 5000);

			/* 向模板返回响应式数据（数据驱动视图） */
			return {
				ageRef,
				state,
			};
		},

	};
</script>